<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;

			}
			ul{
				list-style: none;
			}
			.invoice-note-box {
				-ms-flex-negative: 0;
				flex-shrink: 0;
				width: 100%;
				margin-right: 20px;
				overflow-y: auto;
				overflow-x: hidden;
				background-color: #FFFFFF
			}
			.invoice-note {
				background-color: #ffffff;
				padding: 30px 20px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				min-height: 100%
			}

			.invoice-note .note-header {
				position: relative;
				color: #262b30;
				min-height: 56px
			}

			.invoice-note .note-header .title-box {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-ms-flex-direction: column;
				flex-direction: column;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				min-height: 62px
			}

			.invoice-note .note-header .title-box .title {
				font-size: 28px;
				font-weight: 600;
				line-height: 39px;
				text-align: center
			}

			.invoice-note .note-header .title-box .time {
				font-size: 14px;
				line-height: 20px;
				text-align: center
			}

			.invoice-note .note-header .logo {
				position: absolute;
				left: 0;
				top: 0;
				max-width: 100%;
				height: 58px
			}

			.invoice-note .note-header .logo>img {
				max-width: 100%;
				max-height: 100%
			}

			.invoice-note .note-header .bar-code {
				position: absolute;
				right: 0;
				top: 0
			}

			.invoice-note .note-header .bar-code .code-image {
				height: 42px;
				overflow: hidden
			}

			.invoice-note .note-header .bar-code .code-image>img {
				max-width: 100%;
				max-height: 100%
			}

			.invoice-note .note-header .bar-code .code {
				font-size: 14px;
				line-height: 20px;
				text-align: right
			}

			.invoice-note .note-content>ul>li .item-title {
				font-size: 16px;
				line-height: 22px;
				color: #262b30;
				padding-top: 20px;
				font-weight: bold;
				padding-bottom: 10px
			}

			.invoice-note .note-content>ul>li .item-info-box {
				border: 1px solid #636669;
				padding: 12px 12px 6px 12px;
				font-size: 14px;
				line-height: 20px
			}

			.invoice-note .note-content>ul>li .item-info-box.order-info>ul>li {
				width: 240px;
				margin-right: 20px
			}

			.invoice-note .note-content>ul>li .item-info-box.order-info>ul>li:nth-child(3n+1) {
				width: 250px
			}

			.invoice-note .note-content>ul>li .item-info-box.order-info>ul>li:nth-child(3n) {
				margin-right: 0
			}

			.invoice-note .note-content>ul>li .item-info-box.user-info {
				padding: 12px 0 6px 0
			}

			.invoice-note .note-content>ul>li .item-info-box.user-info>ul {
				padding-left: 12px
			}

			.invoice-note .note-content>ul>li .item-info-box.user-info>ul>li {
				font-size: 14px;
				line-height: 20px;
				width: 240px
			}

			.invoice-note .note-content>ul>li .item-info-box.user-info>ul>li.name,.invoice-note .note-content>ul>li .item-info-box.user-info>ul>li.contact-way {
				margin-right: 20px
			}

			.invoice-note .note-content>ul>li .item-info-box.user-info>ul>li:first-child.name {
				width: 250px
			}

			.invoice-note .note-content>ul>li .item-info-box.user-info>ul>li:first-child.contact-way {
				width: 250px
			}

			.invoice-note .note-content>ul>li .item-info-box.user-info .leave-message {
				width: 100%;
				padding: 12px 12px 6px 12px;
				margin-top: 6px;
				border-top: 1px solid #636669;
				box-sizing: border-box;
			}

			.invoice-note .note-content>ul>li .item-info-box>ul {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;

			}
			.invoice-note .note-content>ul>li  .order-info>ul{
				-ms-flex-wrap: wrap;
				flex-wrap: wrap
			}

			.invoice-note .note-content>ul>li .item-info-box>ul>li {
				font-size: 14px;
				line-height: 20px;
				color: #262b30;
				padding-bottom: 6px
			}

			.invoice-note .note-content>ul>li .item-info-box>ul>li.address {
				width: 100%
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box {
				padding: 0
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: stretch;
				-ms-flex-align: stretch;
				align-items: stretch;
				-webkit-box-pack: end;
				-ms-flex-pack: end;
				justify-content: flex-end
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li {
				display: table-cell;
				padding-bottom: 0
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li:first-child {
				font-size: 18px;
				line-height: 25px;
				width: 40%;
				text-align: center
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li:last-child {
				width: 60%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: end;
				-ms-flex-pack: end;
				justify-content: flex-end
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li.goods-total-li {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				border-right: 1px solid #636669
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li>ul {
				padding: 12px 12px 6px 12px
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li>ul>li {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				font-size: 14px;
				line-height: 20px;
				padding-bottom: 6px;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li>ul>li .label {
				text-align: right;
				-ms-flex-negative: 0;
				flex-shrink: 0
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li>ul>li .content {
				min-width: 80px
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li>ul>li.payment {
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li>ul>li.payment .label {
				font-size: 14px;
				line-height: 20px;
				vertical-align: middle
			}

			.invoice-note .note-content>ul>li .item-info-box.recharge-info-box .recharge-info>li>ul>li.payment .content {
				font-size: 20px;
				line-height: 28px;
				font-weight: bold
			}

			.invoice-note .note-content>ul>li .shop-table-list {
				border: 1px solid #636669
			}

			.invoice-note .note-content>ul>li .shop-table-list thead {
				width: 100%
			}

			.invoice-note .note-content>ul>li .shop-table-list table {
				border-collapse: collapse
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr th,.invoice-note .note-content>ul>li .shop-table-list table tr td>div {
				padding: 10px 20px 10px 0;
				text-align: left;
				font-size: 14px;
				line-height: 20px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr td>div {
				padding: 4px 20px 4px 0
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr th:first-child,.invoice-note .note-content>ul>li .shop-table-list table tr td:first-child {
				padding-left: 12px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr th:last-child>div,.invoice-note .note-content>ul>li .shop-table-list table tr td:last-child>div {
				padding-right: 12px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr th {
				font-weight: bold
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr th.number {
				padding-right: 12px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr td {
				border-top: 1px solid #636669
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr .number {
				width: 55px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr .title {
				min-width: 100px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr .title .goods-two-line-hide {
				max-height: 40px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr .short_title {
				min-width: 80px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr .goods_code {
				min-width: 80px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr .option_title {
				min-width: 100px
			}


			.invoice-note .note-content>ul>li .shop-table-list table tr .price_unit {
				min-width: 60px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr .total {
				min-width: 50px
			}

			.invoice-note .note-content>ul>li .shop-table-list table tr .price {
				min-width: 60px
			}

			.invoice-note .note-footer {
				padding-top: 70px;
				margin: 0 auto
			}

			.invoice-note .note-footer .qr-code {
				width: 124px;
				height: 124px;
				overflow: hidden;
				margin: 0 auto
			}

			.invoice-note .note-footer .qr-code>img {
				width: 100%;
				height: 100%
			}

			.invoice-note .note-footer .name {
				font-size: 14px;
				line-height: 20px;
				color: #262b30;
				text-align: center;
				padding-top: 6px
			}

			.invoice-note .note-header-no-long {
				padding-bottom: 40px
			}

			.invoice-note .note-content-no-long>ul>li:last-child {
				border-bottom: 1px solid #636669
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box {
				border-bottom: none
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.user-info {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				padding: 0
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.user-info>ul,.invoice-note .note-content-no-long>ul>li .item-info-box.user-info .leave-message {
				padding: 12px 12px 6px 12px;
				margin-top: 0;
				border-top: none;
				border-left: 1px solid #636669
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.user-info>ul {
				width: 70%
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.user-info>ul>li {
				width: 36.3%
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.user-info>ul>li.address {
				width: 100%
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.user-info .leave-message {
				width: 30%;
				padding-bottom: 18px
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.recharge-info-box .recharge-info-no-long {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: stretch;
				-ms-flex-align: stretch;
				align-items: stretch
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.recharge-info-box .recharge-info-no-long .goods-number {
				border-right: 1px solid #636669;
				text-align: center;
				font-size: 18px;
				line-height: 25px;
				width: 25%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.recharge-info-box .recharge-info-no-long .goods-number>div {
				text-align: center
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.recharge-info-box .recharge-info-no-long>li {
				padding: 12px 12px 12px 12px
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.recharge-info-box .recharge-info-no-long>li.payment {
				-webkit-box-flex: 1;
				-ms-flex: 1;
				flex: 1;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: end;
				-ms-flex-pack: end;
				justify-content: flex-end;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.recharge-info-box .recharge-info-no-long>li.payment .left {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.recharge-info-box .recharge-info-no-long>li.payment .left .left-item {
				padding-right: 20px;
				font-size: 14px;
				line-height: 20px
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.recharge-info-box .recharge-info-no-long>li.payment .right .label {
				font-size: 14px;
				line-height: 20px
			}

			.invoice-note .note-content-no-long>ul>li .item-info-box.recharge-info-box .recharge-info-no-long>li.payment .right .content {
				font-size: 20px;
				line-height: 28px;
				font-weight: bold
			}

			.invoice-note .note-content-no-long>ul>li .shop-table-list {
				border-bottom: none
			}

			.invoice-note .note-footer-no-long {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				padding-top: 10px
			}

			.invoice-note .note-footer-no-long .qr-code {
				width: 60px;
				height: 60px;
				margin: 0;
				-ms-flex-negative: 0;
				flex-shrink: 0
			}

			.invoice-note .note-footer-no-long .name {
				padding-top: 0;
				padding-left: 6px;
				font-size: 12px;
				line-height: 17px;
				text-align: left
			}
			.goods-two-line-hide{

			}
		</style>
	</head>
	<body>
		<div   id="note_box" class="invoice-note-box">
			<div  class="invoice-note">
				<div  class="note-header">
					<!--start invoice-->

					<div  class="title-box">
						<!--start title-->
						<div  class="title"> {title} </div>
						<!--end title-->
						<!--start create_time-->
						<div  class="time"> {time} </div>
						<!--end create_time-->
					</div>

					<!--end invoice-->
					<div  class="logo"><img src="{logo}"
						 alt=""></div>
					<!--start invoice-->
					<!--start invoice_no-->
					<div  class="bar-code">
						<div  class="code-image"><img src="{bar-code-image}"
							 alt=""></div>
						<div  class="code"> {bar-code} </div>
					</div>
					<!--end invoice_no-->
					<!--end invoice-->
				</div>
				<div  class="note-content">
					<ul >
						<!--start order-->
						<li >
							<div  class="item-title"> 订单信息 </div>
							<div  class="item-info-box order-info">
								<ul >
									<!--start order_no--><li ><span  class="label"> 订单编号： </span><span  class="content">
											{order_no} </span></li><!--end order_no-->
									<!--start name--><li ><span  class="label"> 用户昵称： </span><span  class="content">
											{name} </span></li><!--end name-->
									<!--start pay_type--><li ><span  class="label"> 支付方式： </span><span  class="content">
											{pay_type} </span></li><!--end pay_type-->
									<!--start create_time--><li ><span  class="label"> 下单时间： </span><span  class="content">
											{create_time} </span></li><!--end create_time-->
									<!--start pay_time--><li ><span  class="label"> 付款时间： </span><span  class="content">
											{pay_time} </span></li><!--end pay_time-->
									<!--start order_type--><li ><span  class="label"> 配送方式： </span><span  class="content">
											{order_type} </span></li><!--end order_type-->
								</ul>
							</div>
						</li>
						<!--end order-->
						<!--start receiving-->
						<li >
							<div  class="item-title"> 收货人信息 </div>
							<div  class="item-info-box user-info action">
								<ul >
									<!--start name--><li  class="name"><span  class="label"> 收货人姓名： </span><span
										  class="content"> {name} </span></li><!--end name-->
									<!--start mobile--><li  class="contact-way"><span  class="label"> 联系方式： </span><span
										  class="content"> {mobile} </span></li><!--end mobile-->
									<!--start address--><li  class="address"><span  class="label"> 收货人地址： </span><span
										  class="content"> {address} </span></li><!--end address-->
								</ul>
								<!--start info--><div  class="leave-message"><span  class="label"> 买家留言： </span><span
									  class="content"> {info} </span></div><!--end info-->
							</div>
						</li>
						<!--end receiving-->
						<!--start goods-->
						<li >
							<div  class="item-title"> 商品信息 </div>
							<div  class="shop-table-list">
								<table  width="100%">
									<thead  class="table-header">
										<tr >
											<!--start serial--><th  class="number"> 序号 </th><!--end serial-->
											<!--start name--><th  class="title"> 商品名称 </th><!--end name-->
											<!--<th  class="goods_code"> 商品编码 </th>-->
											<!--start after--><th  class="option_title"> 规格 </th><!--end after-->
											<!--start price--><th  class="price_unit"> 单价 </th><!--end price-->
											<!--start number--><th  class="total"> 数量 </th><!--end number-->
											<!--start amount--><th  class="price"> 总价 </th><!--end amount-->
										</tr>
									</thead>
									<tbody  class="table-content">
										<!--start goods list-->
										<tr >
											<!--start serial-->
											<td  class="number">
												<div >
													<div  class=""> {serial}</div>
												</div>
											</td>
											<!--end serial-->
											<!--start name-->
											<td  class="title">
												<div >
													<div  class="goods-two-line-hide"> {name}</div>
												</div>
											</td>
											<!--end name-->
											<!--<td  class="goods_code">
												<div >
													<div  class=""> 1234567899625566</div>
												</div>
											</td>-->
											<!--start after-->
											<td  class="option_title">
												<div >
													<div  class="goods-two-line-hide"> {after}</div>
												</div>
											</td>
											<!--end after-->
											<!--start price-->
											<td  class="price_unit">
												<div >
													<div  class=""> ￥{price}</div>
												</div>
											</td>
											<!--end price-->
											<!--start number-->
											<td  class="total">
												<div >
													<div  class=""> {number}</div>
												</div>
											</td>
											<!--end number-->
											<!--start amount-->
											<td  class="price">
												<div >
													<div  class=""> ￥{amount}</div>
												</div>
											</td>
											<!--end amount-->
										</tr>
										<!--end goods list-->
									</tbody>
								</table>
							</div>
						</li>
						<!--end goods-->
						<!--start fee-->
						<li >
							<div  class="item-title"> 费用信息 </div>
							<div  class="item-info-box recharge-info-box">
								<ul  class="recharge-info">
									<!--start number-->
									<li  class="goods-total-li">
										<div  class="goods-total">商品件数合计：{number}</div>
									</li>
									<!--end number-->
									<li >
										<ul >
											<!--start freight-->
											<li >
												<div  class="label"> 订单运费： </div>
												<div  class="content"> ¥{freight} </div>
											</li>
											<!--end freight-->
											<!--start subtotal-->
											<li >
												<div  class="label"> 商品小计： </div>
												<div  class="content"> ¥{subtotal} </div>
											</li>
											<!--start discount-->
											<li >
												<div  class="label"> 订单优惠： </div>
												<div  class="content"> -¥{discount} </div>
											</li>
											<!--end discount-->
											<!--start amount-->
											<li  class="payment">
												<div  class="label">实付金额：</div>
												<div  class="content"><span  style="font-size: 14px;">¥</span>{amount}</div>
											</li>
											<!--end amount-->
										</ul>
									</li>
								</ul>
							</div>
						</li>
						<!--end fee-->
					</ul>
				</div>
				<!--start qrcode-->
				<div  class="note-footer">
					<!--start content-->
					<div  class="qr-code">
						<div   class="banner_qr_code">
							<div  class="banner">
								<img src="{qrcode}" class="qrcode" height="124" width="124">
								</div>
						</div>
					</div>
					<!--end content-->
					<!--start bottom-->
					<div  class="name"> {bottom} </div>
					<!--end bottom-->
				</div>
				<!--end qrcode-->
			</div>
		</div>
	</body>
</html>
